<% layout('/layouts/default.html', {title: '室温日历', libs: ['dataGrid']}){ %>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header">
			<div class="box-title">
				<i class="fa icon-notebook"></i> ${text('室温日历')}
			</div>
			<div class="box-tools pull-right">
				<a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a>
			</div>
		</div>
		<div class="box-body">
			<#form:form id="searchForm" model="${abData}" action="${ctx}/ab/abData/listData" method="post" class="form-inline"
			data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
			<div class="form-group">
				<label class="control-label">${text('行政区域')}：</label>
				<div class="control-inline width-120" >
					<#form:treeselect id="areaId" title="${text('区域选择')}"
					path="areaId" labelPath=""
					url="${ctx}/sys/area/treeData" allowClear="true"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">${text('供热公司部门')}：</label>
				<div class="control-inline width-120" >
					<#form:treeselect id="officeId" title="${text('机构选择')}"
					path="officeId" labelPath=""
					url="${ctx}/sys/office/treeData" allowClear="true"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">${text('小区楼宇')}：</label>
				<div class="control-inline">
					<#form:input path="floor" maxlength="64" class="form-control width-120"/>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label">${text('日期选择')}：</label>
				<div class="control-inline">
					<input type="text" id="testDate" name="testDate" value="" readonly="true" maxlength="20" class="form-control laydate " data-type="date" data-format="yyyy-MM" lay-key="1">
				</div>
			</div>
			<div class="form-group">
				<button type="submit" class="btn btn-primary btn-sm">${text('查询')}</button>
				<button type="reset" class="btn btn-default btn-sm">${text('清空')}</button>
				<button type="reset" class="btn btn-default btn-sm">${text('查看平均温度')}</button>
				<button type="reset" class="btn btn-default btn-sm">${text('导出')}</button>
			</div>
		</#form:form>
		<style type="text/css">

			.content{
				float: left;
				width: 100%;
				background: #fff;
				padding: 10px 0 10px 0;
				border: solid 1px #E9E9E9;
				margin-bottom: 10px;
			}
			.center_title{
				float: left;
				width: 100%;
				text-align: center;
				font-size: 18px;
				color: #333333;
				font-weight: normal;
				height: 40px;
				line-break: 40px;
			}
			.center_box{
				float: left;
				width: 98%;
				margin-left: 1%;
				height: 320px;
				overflow-y: scroll;
			}
			.cldBody{width: 18%;margin: 5px;float: left;border:1px solid #E9E9E9;text-align: center;position: relative;}
			.cldBody .top{height: 20px;line-height: 20px;}
			.rili_box{width:90%;margin: 5%;}
			#week td{font-size: 15px;}
			td{width: 20px; height: 20px;line-height: 20px;text-align: center;font-size: 10px;}
			#tbody td:hover{background: #ededed;cursor: pointer;}
			.red{background-color: #ff5346;border:1px solid #fff; }
			.table-title{border:1px solid #fff;}
			.yellow{
				background: #facd2f;
				border:1px solid #fff;
			}
			.green{
				background: #36cea5;
				border:1px solid #fff;
			}
			.blue{
				background: #3fc4fc;
				border:1px solid #fff;
			}
			.empty{
				background: #d0caca;
				border:1px solid #fff;
			}
		</style>
		<div class="content">
			<h1 class="center_title">吉林省省长春市市-九台荣祥供热有限公司</h1>
			<div class="center_box" id="center_box"></div>
		</div>
		<table id="dataGrid"></table>
	</div>
</div>
</div>
<% } %>
<script>
	// 初始化DataGrid对象
	$('#dataGrid').dataGrid({
		searchForm: $("#searchForm"),
		columnModel: [
			{header:'${text("用户名")}', name:'name', index:'a.name', width:150, align:"left", frozen:true, formatter: function(val, obj, row, act){
					return '<a href="${ctx}/ab/abData/form?dateCode='+row.dateCode+'" class="btnList" data-title="${text("编辑室温数据表")}">'+(val||row.id)+'</a>';
				}},
			{header:'${text("供热公司部门")}', name:'companyName', index:'a.company_name', width:150, align:"left"},
			{header:'${text("行政区域")}', name:'areaName', index:'a.area_name', width:150, align:"left"},
			{header:'${text("小区楼宇")}', name:'floorName', index:'a.floor_name', width:150, align:"left"},
			{header:'${text("测温id")}', name:'equipNo', index:'a.equip_no', width:150, align:"left"},
			{header:'${text("当前温度")}', name:'inValue', index:'a.in_value', width:150, align:"right", formatter: function(val, obj, row, act){
					return js.formatNumber(val, 2, false, ''); // 数值类型格式化 (原始数值, 小数位数, 是否千分位, 默认值，金额情况下设置0.00);
				}},
			{header:'${text("室外温度")}', name:'outValue', index:'a.out_value', width:150, align:"right", formatter: function(val, obj, row, act){
					return js.formatNumber(val, 2, false, ''); // 数值类型格式化 (原始数值, 小数位数, 是否千分位, 默认值，金额情况下设置0.00);
				}},
			{header:'${text("上传时间")}', name:'createTime', index:'a.create_time', width:150, align:"center"},
			{header:'${text("操作")}', name:'actions', width:120, sortable:false, title:false, formatter: function(val, obj, row, act){
					var actions = [];
				<% if(hasPermi('ab:abData:edit')){ %>
						actions.push('<a href="${ctx}/ab/abData/form?dateCode='+row.dateCode+'" class="btnList" title="${text("编辑室温数据表")}"><i class="fa fa-pencil"></i></a>&nbsp;');
						actions.push('<a href="${ctx}/ab/abData/delete?dateCode='+row.dateCode+'" class="btnList" title="${text("删除室温数据表")}" data-confirm="${text("确认要删除该室温数据表吗？")}"><i class="fa fa-trash-o"></i></a>&nbsp;');
					<% } %>
					return actions.join('');
				}}
		],
		// 加载成功后执行事件
		ajaxSuccess: function(data){

		}
	});
	$(".model_detail").hover(function (){
		$(this).children(".model_abs").css("display","block");
	},function (){
		$(this).children(".model_abs").css("display","none");
	});
	var date = new Date();
	var year = date.getFullYear();
	var nowyear = date.getFullYear();
	var month = date.getMonth()+1;
	var nowmonth = date.getMonth()+1;
	var dateday = date.getDate();
	// var todateHtml = year + '年'+ month + '月';
	// $('#topDate').text(todateHtml)
	function showcld(index){
		var monthDay = [31,28,31,30,31,30,31,31,30,31,30,31];  // 创建数组存放每个月有多少天 ,默认2月为28天
		// 判断闰年
		if(year % 4 == 0 && year %100 != 0 || year % 400 == 0){
			monthDay[1] = 29;
		}
		// 计算每个月的天数
		var days = monthDay[month-1];
		// 判断每月第一天为周几
		date.setYear(year);        //某年
		date.setMonth(month-1);   //某年的某月
		date.setDate(1);   // 某月的某天
		var weekday = date.getDay();  // 判断某天是周几
		// 补齐一号前的空格
		var tbodyHtml = '<tr>';
		for(var i = 0; i<weekday; i++){
			tbodyHtml += "<td></td>";
		}
		// 补齐每月的日期
		var changLine = weekday;
		var tagClass = '';
		for(i=1; i<=days; i++){//每一个日期的填充
			if(year == nowyear && month == nowmonth && i == dateday) {
				tagClass = "red";//当前日期对应格子
			}else{
				tagClass = "empty";
			}
			tbodyHtml += "<td class=" + tagClass + ">" + i + "</td>";
			changLine = (changLine+1)%7;
			if(changLine == 0 && i != days){//是否换行填充的判断
				tbodyHtml += "</tr><tr>";
			}
		}
		$('#tbody'+index).empty();   // 清空原有的内容
		$('#tbody'+index).append(tbodyHtml);   //添加当前月份的日期内容
	}

	//创建单行6列的表格
	function createTable(index){
		//创建表格table元素
		var $tab=$("<table class=\"rili_box\"></table>");
		//创建表格tr行元素
		var $tr=$("<tr></tr>");
		var array = ["日","一","二","三","四","五","六"]
		for(var i=0;i<array.length;i++)
		{
			//创建td单元格元素
			var $td=$("<td class='table-title'></td>");
			$td.html(array[i]);
			//将td单元格添加到表格行tr上
			$tr.append($td);
		}
		//将tr表格行添加到table表格上
		$tab.append($tr);
		var $tbody = $("<tbody id=\"tbody"+index+"\" ></tbody>");
		$tab.append($tbody);
		//将创建好的整个table挂载到div上
		var $cldBody = $("<div class=\"cldBody\" ></div>")
		$cldBody.append($tab)
		$cldBody.append("<span class=\"model_title\">" + index + "</span>");
		$("#center_box").append($cldBody)

	}
	for (var i =0; i <6; i++) {
		createTable(i);
		showcld(i);
	}
</script>